<template>
	<view class="content" :style="{'height':windowHeight+'px'}">
		<image class="login" src="../../static/image/log.png" mode="widthFix"></image>
		<form>
			<view class="login-info">
				<view>
					<text>账号：</text>
					<input v-model="number" type="text" placeholder="请输入账号" />
				</view>
				<view>
					<text>密码：</text>
					<input v-model="password" type="password" placeholder="请输入密码" />
				</view>
			</view>
			<view>
				<button class="button-green" @click="login()">登录</button>
			</view>
		</form>
		<text class="end">北体高科（背景）科技有限公司</text>
	</view>
</template>

<script>
	import {login} from "../../api/login.js"
	
	export default {
		data() {
			return {
				windowHeight: 0,
				number: 'zhangsan',
				password: '123456',
			}
		},
		methods: {
			login() {
				const data = {
					username: this.number,
					password: this.password
				}
				if(data.password==''||data.username==''){
					uni.showToast({
					    title: '请输入用户名/密码',
					    duration: 2000,
						icon:'none'
					});
				}else{
					uni.removeStorage({
						key:'token'
					})
					login(data).then(res => {
						if (res.code === 200) {
							uni.setStorage({
								key:'token',
								data:res.token
							})
							uni.setStorage({
								key:'teacherInfo',
								data:res.userInfo
							})
							uni.navigateTo({
								url: "./class/myClass"
							})
						}else{
							uni.showToast({
							    title: '用户名/密码不正确',
							    duration: 2000,
								icon:'none'
							});
						}
					})
				}
			}
		},
		onLoad() {
			let _this = this;
			// 获取页面高度
			_this.$uniApi.getWindowHeight(_this);
		},
	}
</script>

<style>
	.content {
		width: 750rpx;
		background-color: #F5F5F5;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.login {
		margin-top: 65rpx;
		margin-bottom: 50rpx;
		width: 250rpx;
	}

	.login-info {
		overflow: hidden;
		width: 650rpx;
		margin-bottom: 50rpx;
		background-color: #FFFFFF;
		border-radius: 5px;
		font-size: 15px;
	}

	.login-info view {
		display: flex;
		align-items: center;
	}

	.login-info text {
		padding-left: 20px;
		padding-right: 15px;
	}

	.login-info input {
		flex: 1;
		font-size: 15px;
		padding: 18px 20px 18px 0;
	}
</style>
